<template>
  <el-dialog append-to-body :visible.sync="open" width="60%" :before-close="handleClose" class="demandFormVisible_dialog">
    <template slot="title">
      <div style="">{{ celldbData.genName }}</div>
    </template>

    <div class="headerInfoButton">
      <el-button type="success" plain @click="onInfoTap()">案卷信息</el-button>
    </div>
    <div>
      <el-table :height="tableHeight" v-loading="loading" :data="dataList" @row-dblclick="rowdblclick">
        <el-table-column label="序号" sortable align="center" type="index" prop="id" />
        <el-table-column label="资料号" align="center" prop="fileNum" :show-overflow-tooltip="true" />
        <el-table-column label="资料名" align="center" prop="genNume" :show-overflow-tooltip="true" />
        <el-table-column label="出版单位" align="center" prop="publishUnit" :show-overflow-tooltip="true" />
        <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />
        <el-table-column label="出版时间" align="center" prop="publishData" :show-overflow-tooltip="true" />
        <el-table-column label="页号" align="center" prop="pageHouse" :show-overflow-tooltip="true" />
        <el-table-column label="页数" align="center" prop="pageNum" :show-overflow-tooltip="true" />
        <el-table-column label="控制属性" align="center" prop="controlType" :show-overflow-tooltip="true">
          <template slot-scope="scope">
              <span v-for="(i, idx) in dict.type.CONTROLTYPE" :key="idx">
                {{ scope.row.controlType == i.value ? i.label : '' }}
              </span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="资料状况" align="center" prop="genStatus" :show-overflow-tooltip="true" />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList" />
      <mt-popup v-model="visibleOpen" stretch position="right" style="height:100%;width: 25%; padding:0 20px">
        <div class="popup-main">
          <ul class="dataList info-scroll" style="overflow-y:scroll;height:calc(100vh - 95px)">
            <li v-for="(item, index) in dataInfo" :key="index">
              <label>{{ item.label }}:</label>
              <p
                v-if="item.prop == 'controlType'">
                <span v-for="(i, idx) in dict.type.CONTROLTYPE" :key="idx">
                  {{ item.value == i.value ? i.label : '' }}
                </span>
              </p>
              <p v-else class="nowrap-1">{{ item.value }}</p>
            </li>
          </ul>
        </div>
      </mt-popup>

      <!-- 件详情 start -->
      <JianDetail v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="dataInfoCell2" isType="1"
                  @detailsHandleClose="detailsHandleClose"></JianDetail>
      <!-- 件详情 end -->
    </div>
  </el-dialog>
</template>

<script>
import {getFileDetail, getFileList} from "@/api/information/receivingManagement";
import JianDetail from "@/views/information/receivingManagement/jianDetail";

export default {
  name: "juanDetail",
  components: {JianDetail},
  props: ['open', 'celldbData'],
  archive_Dicts: ['CONTROLTYPE'],
  data() {
    return {
      loading: true,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      tableHeight: "",
      visibleOpen: false, //信息展示效果是否弹窗
      dataInfo: [], //数据显示
      jianDetailsOpen: false,
      dataInfoCell2: {}
    }
  },
  watch: {
    celldbData: {
      handler(valNew) {
        console.log(valNew, '----------')
        this.queryParams.folderId = valNew.id
        this.dataInfo = valNew.tableColumns
        console.log(this.dataInfo, '---------------')
        this.tableHeightData()
        this.getList()
      },
      immediate: true
    }
  },
  methods: {
    //动态设置table的高度
    tableHeightData() {
      this.$nextTick(
        () => {
          let h = 650;

          //  h = h + 100
          if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
            h = h - this.$refs.queryForm.$el.offsetHeight
          }

          if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
            h = h - this.$refs.refbut.$el.offsetHeight
          }
          this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度
          return h
        }
      )
    },
    getList() {
      this.loading = true
      getFileList(this.queryParams).then(response=>{
        this.dataList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    rowdblclick(row) {
      getFileDetail(row.id).then(response=>{
        const tableColumns = [
          { label: '资料号', prop: 'fileNum' },
          { label: '资料名', prop: 'genNume' },
          { label: '出版单位', prop: 'publishUnit' },
          { label: '作者', prop: 'author' },
          { label: '出版时间', prop: 'publishData' },
          { label: '页号', prop: 'pageHouse' },
          { label: '页数', prop: 'pageNum' },
          { label: '控制属性', prop: 'controlType' },
          { label: '密级', prop: 'mj' },
          { label: '备注', prop: 'remark' },
          { label: '资料状况', prop: 'genStatus' },
        ]
        for (let i = 0; i < tableColumns.length; i++) {
          tableColumns[i].value = response.data[tableColumns[i].prop]
        }
        console.log(response.data, tableColumns)
        this.dataInfoCell2 = response.data
        this.dataInfoCell2.tableColumns = tableColumns
        this.dataInfoCell2.folderInfo = this.celldbData.tableColumns
        this.$nextTick(() => {
          this.jianDetailsOpen = true
        })
      })
    },
    //关闭
    handleClose() {
      this.$emit("detailsHandleClose")
    },
    onInfoTap() {
      this.visibleOpen = true;
    },

    //关闭详情页面
    detailsHandleClose() {
      this.jianDetailsOpen = false;
    },
  }
}
</script>

<style lang="less" scoped>
ul,
li,
p,
div {
  padding: 0;
  margin: 0;
}

/deep/.el-tabs--border-card>.el-tabs__content {
  padding: 0 !important;
}

.headerInfoButton {
  position: absolute;
  top: 16px;
  right: 60px;
}

::v-deep .el-dialog__body {
  padding: 10px 20px 25px !important;
}

.margin_t {
  margin-top: 10px;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-bowtte {
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.itemList {
  padding: 10px 15px 10px;
}

.itemList p {
  line-height: 38px;
  display: block;
}

.demandFormVisible_dialog {
  .el-dialog__wrapper {
    pointer-events: none;

    ::v-deep .el-dialog {
      pointer-events: auto;
    }
  }
}

.dataList li {
  font-size: 16px;
  line-height: 50px;
  border-bottom: 1px dashed #cccccc4d;
}

.dataList li p {
  width: 302px;
  display: inline-block
}

.dataList li label {
  font-weight: bold;
  text-align: right;
  margin-right: 10px;
}

</style>
